<template>
	<div class="my-input-number" @click.stop="">
		<span class="icon_minus" @click="minus">-</span>
		<span class="inputText">{{ number }}</span>
		<span class="icon_plus" @click="plus">+</span>
	</div>
</template>

<script>
	export default {
		name: 'MyInputNumber',
		props: ['count', 'id'],
		data() {
			return {
				operator: ''
			}
		},
		computed: {
			number() {
				return this.count;
			}
		},
		methods: {
			minus() {
				this.operator = 'minus',
					this.changeNumber();
			},
			plus() {
				this.operator = 'plus'
				this.changeNumber();
			},
			changeNumber() {
				this.$emit('changeNumberEvent', this.operator, this.id);
			}
		},
	}
</script>

<style lang="scss" scoped>

	.icon_minus,
	.icon_plus {
		font-size: 14px;
		border: 1px solid #333;
		height: 18px;
		width: 18px;
		line-height: 16px;
		display: inline-block;
		text-align: center;
		border-radius: 12px;
		font-weight: bold;
	}

	.icon_minus {
		color: #333;
	}

	.icon_plus {
		color: #333;
	}

	.my-input-number {
		display: inline-block;
		user-select: none;

		.inputText {
			display: inline-block;
			width: 20px;
			text-align: center;
		}
	}
</style>
